<template>
  <footer>
    <ul class="bottom-nav">
      <router-link to="/index" tag="li" active-class="active">
        <b class="iconfont icon-dianying"></b>
        <span>电影</span>
      </router-link>
      <router-link to="/cinema" tag="li" active-class="active">
        <b class="iconfont icon-yingyuan"></b>
        <span>影院</span>
      </router-link>
      <router-link to="/content" tag="li" active-class="active">
        <b class="iconfont icon-wode"></b>
        <span>我的</span>
      </router-link>
    </ul>
  </footer>
</template>

<script>
export default {};
</script>

<style>
.bottom-nav {
  display: flex;
  height: 0.5rem;
  width: 100%;
}
.bottom-nav li {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.15rem;
}
.bottom-nav li b {
  font-size: 0.25rem;
}
.active {
  color: rgb(214, 41, 35);
}
</style>
